<template>
    <div class="pb-[80px]">
        <div class="bg-white rounded-[4px]">
            <div class="p-[20px]">
                <div class="mb-[30px]">
                    <span class="text-[16px]">站点设置</span>
                </div>
                <a-form :model="formState" ref="formRef" :label-col="{ style: { width: '120px' } }">
                    <a-form-item label="JS统计代码" name="content">
                        <a-textarea class="w-[500px]" v-model:value="formState.content" placeholder="请粘贴JS统计代码"
                            :auto-size="{ minRows: 5, maxRows: 10 }" />
                    </a-form-item>
                </a-form>
            </div>

        </div>
        <div
            class="fixed bottom-0 w-[100%] border-0 border-t-[1px] border-solid border-[#f2f2f2] bg-white flex justify-start  <lg:(w-full justify-center)  py-[20px]">
            <a-button class="mx-[140px]" type="primary" html-type="submit" @click="submitForm">确认保存</a-button>
        </div>
    </div>

</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';

import { getJsCodeSetting, saveJsCodeSetting } from '@/utils/api/setting';

const formRef = ref();

const formState = reactive({
    key: 'jscode',
    content: '',
})

onMounted(() => {
    initData();
});

// 初始化数据
const initData = () => {
    // 获取默认配置
    getJsCodeSetting({ key: 'jscode' }).then((res: any) => {
        if (res.data) {
            formState.content = res.data.content;
        }
    })
};

const submitForm = () => {
    console.log(formState)
    formRef.value
        .validate()
        .then(() => {
            saveJsCodeSetting(formState).then((res: any) => {
                if (res.code == 200) {
                    message.success(res.message);
                } else {
                    message.error(res.message);
                }
            })
        });
}
</script>